<template>
  <div class="login-box">
    <div style="width: 400px; margin: 150px auto">
      <div
        style="
          color: #ccccc;
          font-size: 30px;
          text-align: center;
          padding: 30px 0;
        "
      >
        用户登录
      </div>
      <el-form ref="form" :model="form" size="normal" :rules="rules">
        <el-form-item prop="account">
          <el-input v-model="form.account" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="login"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
      <a
        style="text-decoration: underline; color: #409eff"
        @click="$router.push('/register')"
        >没账号?点我去注册</a
      >

      <a
        style="margin-left:50px;text-decoration: underline; color: #409eff"
        @click="$router.push('/adminLogin')"
        >后台登录</a
      >
    </div>
  </div>
</template>

<script>
import request from "../../utils/request";
//import router from "@/router";
//import router from "@/router/index.js";

export default {
  name: "userLogin",
  data() {
    return {
      form: {},
      rules: {
        account: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    sessionStorage.removeItem("user");
  },
  methods: {
    login() {
      //如果规则校验通过就执行下面
      this.$refs["form"].validate((valid) => {
        if (valid) {
          //进行登录请求
          request.post("/user/login", this.form).then((res) => {
            console.log(res);
            if (res.code != 0) {
              this.$message({
                type: "error",
                message: "登录失败",
              });
            }
            this.$message({
              type: "success",
              message: "登录成功",
            });
            sessionStorage.setItem("user", JSON.stringify(res.data)); //保存admin信息
            this.$router.push("/index");
            console.log("执行结束");
          });
        }
      });
    },
  },
};
</script>

<style>
.login-box {
  background-image: url("../../assets/img/login/loginUser.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
</style>